<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>用户注册</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        neutral: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
            }
            .form-card {
                @apply bg-white rounded-2xl shadow-xl p-8 max-w-md mx-auto transform hover:shadow-2xl transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen font-inter">
<div class="flex items-center justify-center min-h-screen px-4">
    <div class="form-card w-full">
        <div class="text-center mb-8">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-user-plus text-primary text-2xl"></i>
            </div>
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">创建新账户</h2>
            <p class="text-gray-500 mt-2">填写以下信息注册您的账号</p>
        </div>

        <c:if test="${not empty error}">
            <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6 rounded">
                <p class="text-red-700 text-sm">${error}</p>
            </div>
        </c:if>

        <form action="register" method="post" class="space-y-5">
            <div class="space-y-2">
                <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                    <input type="text" id="username" name="username" placeholder="请输入用户名"
                           class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 input-focus"
                           required>
                </div>
            </div>

            <div class="space-y-2">
                <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                    <input type="password" id="password" name="password" placeholder="至少6个字符"
                           class="w-full pl-10 pr-10 py-3 rounded-xl border border-gray-300 input-focus"
                           required>
                </div>
                <p class="text-xs text-gray-500">密码必须至少包含6个字符</p>
            </div>

            <div class="space-y-2">
                <label for="role" class="block text-sm font-medium text-gray-700">用户角色</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500">
                            <i class="fa fa-user-circle"></i>
                        </span>
                    <select id="role" name="role"
                            class="w-full pl-10 pr-10 py-3 rounded-xl border border-gray-300 input-focus appearance-none bg-white">
                        <option value="USER">普通用户</option>
                        <option value="ADMIN">管理员</option>
                    </select>
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
                        <i class="fa fa-chevron-down text-xs"></i>
                    </div>
                </div>
            </div>

            <button type="submit"
                    class="w-full py-3 px-4 bg-primary text-white rounded-xl font-medium btn-hover flex items-center justify-center">
                <span>立即注册</span>
                <i class="fa fa-arrow-right ml-2"></i>
            </button>
        </form>

        <div class="mt-6 text-center">
            <p class="text-gray-600">
                已有账号? <a href="login.jsp" class="text-primary font-medium hover:underline">立即登录</a>
            </p>
        </div>

        <div class="mt-8 pt-6 border-t border-gray-100">
            <div class="flex justify-center space-x-4">
                <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
                    <i class="fa fa-weixin"></i>
                </a>
                <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
                    <i class="fa fa-qq"></i>
                </a>
                <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
                    <i class="fa fa-weibo"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    // 密码可见性切换
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('password');
        const icon = this.querySelector('i');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    });

    // 表单输入动画效果
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('focus', () => {
            input.parentElement.classList.add('scale-[1.01]');
        });
        input.addEventListener('blur', () => {
            input.parentElement.classList.remove('scale-[1.01]');
        });
    });
</script>
</body>
</html>